<template>
    <Modal
            class="model"
            v-model="show"
            @on-cancel="handleCancel(false)"
            title="回访详细"
            :mask-closable="false"
            width="80%">
        <Row>
            <Col span="18">
                <div class="title">回访信息</div>
                <Divider />
                <Form :model="formItem" :rules="formRule" :label-width="118" ref="formItem" class="return-form">
                    <FormItem label="回访状态" required prop="radio">
                        <RadioGroup v-model="formItem.radio" @on-change="handleChangeRadio">
                            <Radio v-for="(method, index) in methodList" :key="index" :label="method.id">{{ method.name }}</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="回访方式" required prop="radios">
                        <RadioGroup v-model="formItem.radios">
                            <Radio label="1">电话</Radio>
                            <Radio label="2">微信</Radio>
                            <Radio label="3">QQ</Radio>
                            <Radio label="4">其他</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem label="回访内容" prop="textarea">
                        <Input
                                v-model="formItem.textarea"
                                type="textarea"
                                :autosize="{minRows: 2,maxRows: 5}"
                                placeholder="请输入回访内容"
                        ></Input>
                    </FormItem>
                    <FormItem label="患者标签" prop="tag">
                        <Select v-model="formItem.tag" filterable multiple>
                            <OptionGroup v-for="(item, index) in tagList" :key="index" :label="item.name">
                                <Option v-for="(items, inum) in item.children" :value="items.id" :key="inum">{{ items.name }}</Option>
                            </OptionGroup>
                        </Select>
                    </FormItem>
                    <FormItem label="就诊类型" prop="select">
                        <Select v-model="formItem.select" disabled style="width:190px" clearable>
                            <Option v-for="(item, index) in typeList" :key="'type-' + index" :value="item.id">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="下次回访时间" prop="date">
                        <Input style="width:50px" v-model="time"
                        @input="changeText($event)"
                        type="number"
                        />
                        <span style="margin:0 10px">天后</span>
                        <DatePicker
                                type="datetime"
                                placeholder="请输入回访时间"
                                v-model="formItem.date"
                                :options="dateOption"
                                 @input="changeTexts"
                        ></DatePicker>
                    </FormItem>
                    <FormItem label="下次复诊时间" prop="date1">
                        <DatePicker
                                type="datetime"
                                placeholder="请输入复诊时间"
                                v-model="formItem.date1"
                                :options="dateOption"
                        ></DatePicker>
                    </FormItem>
                </Form>
            </Col>
            <Col span="6" class="side-bg">
                <div class="basic">
                    <h3>{{itemData.name}} {{itemData.gender_str}} {{itemData.age}}岁</h3>
                    <h4 class="b-phone">
                        <span>手机号：{{itemData.mobile}}</span>
                        <span>诊疗号：{{itemData.patient_card_id}}</span>
                    </h4>
                </div>
                <div class="sky-screen">
                    <row>
                        <Col span="16">
                            <DatePicker v-model="searchItem.date" @on-change="onSearchItem" clearable type="daterange" placeholder="回访日期"></DatePicker>
                        </Col>
                        <Col span="8">
                            <Select v-model="searchItem.select" placeholder="岗位选择" @on-change="onSearchItem">
                                <Option v-for="(item, index) in postList" :key="'post'+ index" :value="item.id">{{item.name}}</Option>
                            </Select>
                        </Col>
                    </row>
                </div>
                <Divider />
                <Timeline v-if="itemList.length > 0">
                    <TimelineItem v-for="(items, index) in itemList" :key="'item'+index">
                        <p class="time">{{items.current_callback_time_str}}</p>
                        <p class="content">{{items.content}}</p>
                        <p class="consultant">
                            <span class="c-inr-right" v-if="items.profession_name">{{items.profession_name}}</span>
                            <span class="c-inr-right" v-if="items.member_name">{{items.member_name}}</span>
                            <Badge status="success" :text="items.callback_state_id|handleState" />
                            <span> &nbsp; </span>
                            <Badge status="success" color="orange" :text="items.callback_way" />
                        </p>

                    </TimelineItem>
                </Timeline>
                <div v-else style="height: 300px;text-align: center">暂无回访信息</div>
            </Col>
        </Row>
        <div slot="footer">
            <Button @click="handleCancel(false)">取消</Button>
            <Button type="primary" :loading="loading" @click="handleOk('formItem')">确定</Button>
        </div>
    </Modal>
</template>
<script>
    import { formatWithYear } from '@/utils/datetime';
    import { CreateReturn, GetReturnItemList } from '@api/returnVisit';
    import { PatientUpdataDetail } from '@/api/patient'
    import { mapState } from 'vuex'
    export default {
        computed: {
            ...mapState('admin/page', ['pagePatient'])
        },
        data () {
            return {
                time: '',
                Time: '',
                TimeList: '',
                loading: false,
                show: false,
                searchItem: {
                    date: [],
                    select: '00'
                },
                formItem: {
                    input: '',
                    tag: [],
                    select: '',
                    radio: '3',
                    radios: '1',
                    date: '',
                    date1: '',
                    textarea: ''
                },
                formRule: {
                    textarea: [
                        { required: true, message: '回访内容不能为空', trigger: 'blur' }
                    ],
                    date: [
                        { required: true, message: '下次回访日期不可为空' }
                    ]
                },
                postList: [{ id: '00', name: '全部岗位' }],
                taglist: [],
                itemData: {},
                itemList: [],
                tagList: [],
                typeList: [],
                methodList: [],
                dateOption: {
                    disabledDate (pick) {
                        const curDate = new Date();
                        curDate.setTime(curDate.getTime() - (3600 * 1000 * 24));
                        let reVal = 0;
                        if (pick < curDate) {
                            reVal = 1;
                        }
                        return reVal;
                    }
                }

            }
        },
        methods: {
            changeText (e) {
                this.time = e
                let CurrentDate = new Date().getTime()
                let ReturnDate = e * 24 * 60 * 60 * 1000
                this.Time = ReturnDate + CurrentDate
                this.format(this.Time)
            },
            format (data) {
                var time = new Date(data);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();
                var mm = time.getMinutes();
                var s = time.getSeconds();
                this.formItem.date = y + '-' + (m) + '-' + (d) + ' ' + (h) + ':' + (mm) + ':' + (s);
            },
            handleShow (row, types, tags, status) {
                this.show = true;
                this.itemData = row;
                this.typeList = types;
                this.tagList = tags;
                this.getEditDetail(row.id, status)
                this.formItem.select = this.filterId(row.outpatient_name, types);
                this.formItem.date1 = row.next_revisiting_time_str || '';
                this.handleLoad();
            },
            handleChangeRadio (id) {
                let obj = this.methodList.filter(item => item.id === id)
                if (obj && obj[0].name === '已到院') {
                    this.formItem.textarea = '已到院'
                } else {
                    this.formItem.textarea = ''
                }
            },
            getEditDetail (id = this.pagePatient.patientId, status) {
                PatientUpdataDetail({ id, edit_type: status }).then(res => {
                    this.formItem.tag = res.tags_ids
                    this.methodList = res.condition.callback_status_list
                    let obj = res.condition.callback_status_list.filter(item => item.name === '正常回访')
                    this.formItem.radio = obj[0].id
                    this.formItem.date1 = res.next_revisiting_time || ''
                    if (res.is_show_medical === 1 && res.is_show_customer === 0) {
                        // 医助
                        this.formItem.date = res.yz_next_callback_time
                    } else if (res.is_show_medical === 0 && res.is_show_customer === 1) {
                        // 客服
                        this.formItem.date = res.kf_next_callback_time
                    } else {
                        this.formItem.date = ''
                    }
                })
            },
            filterId (name, types) {
                let reVal = ''
                if (types && types.length > 0) {
                    types.forEach(type => {
                        if (type.name === name) {
                            reVal = type.id;
                        }
                    })
                }
                return reVal;
            },
            handleLoad () {
                const params = {
                    patient_user_id: this.itemData.id,
                    start_time: this.searchItem.date[0] && this.formDate(this.searchItem.date[0]),
                    end_time: this.searchItem.date[1] && this.formDate(this.searchItem.date[1]),
                    profession_id: this.searchItem.select === '00' ? '' : this.searchItem.select,
                    page: 0,
                    pageSize: 0
                }
                GetReturnItemList(params).then((res) => {
                    this.itemList = res.list
                    if (this.postList.length === 1) {
                        const postList = res.condition.permission_list
                        this.postList = this.postList.concat(postList);
                    }
                }).catch(() => {})
            },
            handleCancel (val) {
                this.show = false;
                this.$refs['formItem'].resetFields()
                this.searchItem = {
                    date: [],
                    select: '00'
                }
                if (val) {
                    this.$emit('close', true)
                }
            },
            handleOk () {
                if (this.formItem.date && this.formItem.date < new Date()) {
                    this.$Message.warning('下次回访时间已过期，请重新选择！')
                    return;
                }
                if (this.formItem.date1 && this.formItem.date1 < new Date()) {
                    this.$Message.warning('下次复诊时间已过期，请重新选择！')
                    return;
                }
                const params = {
                    patient_id: this.itemData.id,
                    callback_state_id: this.formItem.radio,
                    callback_way_id: this.formItem.radios,
                    content: this.formItem.textarea,
                    next_callback_time: this.formItem.date,
                    next_fuzhen_time: this.formItem.date1,
                    outpatient_type_id: this.formItem.select,
                    tags_ids: this.formItem.tag.join(',')
                }
                CreateReturn(params).then((res) => {
                    this.$Message.success(' 提交回访成功');
                    this.loading = false;
                    this.handleCancel(true);
                }).catch(() => {
                    this.loading = false;
                })
            },
            onSearchItem () {
                this.handleLoad();
            },
            formDate (date) {
                return formatWithYear(date, '-')
            },
            changeTexts (e) {
                let CurrentDate = new Date().getTime()
                let ReturnDate = new Date(e).getTime()
                let Time = ReturnDate - CurrentDate
                let day = Math.ceil(Time / 1000 / 60 / 60 / 24)
                this.time = day
            }
        },
        filters: {
            handleState (val = '') {
                let reVal = '';
                if (val) {
                    const value = parseInt(val, 10)
                    if (value === 1) {
                        reVal = '未接通';
                    } else if (value === 2) {
                        reVal = '微信拉黑';
                    } else if (value === 3) {
                        reVal = '正常回访';
                    } else if (value === 4) {
                        reVal = '已到院';
                    }
                }
                return reVal
            }
        }
    }
</script>
<style scoped>
    .time {
        font-size: 14px;
        font-weight: bold;
    }
    .content {
        padding: 10px 0;
    }
    .consultant {
        color: #9ea7b4;
    }
    .c-inr {
        margin: 0 10px;
    }
    .c-inr-right {
        margin-right: 10px;
    }
    .b-phone {
        line-height: 26px;
        font-size: 12px;
    }
    h4 span {
        margin-left: 5px;
    }
    .side-bg {
        background: #f2f2f2;
        padding: 24px !important;
        height: 570px;
        max-height: 570px;
        overflow-y: auto
    }
    .return-form {
        padding: 24px;
    }
    .title {
        font-weight: bold;
        font-size: 16px;
        padding: 24px 0 0 24px;
    }
    .sky-screen {
        margin-top: 16px;
    }
</style>
<style>
    .model .ivu-modal-body {
        padding: 0px;
    }
</style>
